/**
 * Created by apple on 2017/6/29.
 */
import React, {Component} from 'react';
import {
  StyleSheet,
  Text,
  View,
  ListView,
  TextInput,
  Image,
  RefreshControl,
} from 'react-native';
import ScrollableTabView, { ScrollableTabBar, } from 'react-native-scrollable-tab-view';
import NavigationBar from '../common/NaviagtionBar';
import DataReposiyoty from '../expand/dao/DataReposiyoty';
import RepositoryCell from '../common/RepositoryCell';
const url = 'https://api.github.com/search/repositories?q=';
const QUERY_SORT = '&sort=stars';

export default class Popularpage extends Component {
  constructor(props) {
    super(props);
    this.dataRepository = new DataReposiyoty();
    this.state = {
      result: '123'
    }
  }
  genUrl(key){
    return url + key +QUERY_SORT
  }
  onLoad(){
    let url = this.genUrl(this.text);
    this.dataRepository.fetchNetRepository(url)
      .then((result) =>{this.setState({result:JSON.stringify(result.items)})})

  }

  render(){
    return (
      <View style={styles.container}>
        <NavigationBar
          title={'最热模块'}
          style={{backgroundColor:'#2197f3'}}
          statusBar={{backgroundColor:'#2197f3'}}
        />
        <ScrollableTabView
          renderTabBar={ () =><ScrollableTabBar/>}
          tabBarInactiveTextColor="white"
          tabBarActiveTextColor="white"
          tabBarBackgroundColor="#2196f3"
          tabBarUnderlineStyle={{backgroundColor:"#e7e7e7",height:2}}
        >
          <PopularTab tabLabel="ios">ios</PopularTab>
          <PopularTab tabLabel="java">java</PopularTab>
          <PopularTab tabLabel="android">android</PopularTab>
          <PopularTab tabLabel="js">js</PopularTab>
        </ScrollableTabView>
      </View>
    )
  }

}
class PopularTab extends Component{
  constructor(props) {
    super(props);
    this.dataRepository = new DataReposiyoty();
    this.state = {
      result: '123',
      isLoading:false,
      dataSource:new ListView.DataSource({rowHasChanged:(r1,r2)=>r1!==r2})
    }
  }
  componentDidMount(){
    this.onLoad();
  }
  genUrl(){
    return url + this.props.tabLabel +QUERY_SORT
  }
  onLoad(){
    this.setState({isLoading:true})
    let url = this.genUrl();
    this.dataRepository.fetchNetRepository(url)
      .then(result => this.setState({dataSource:this.state.dataSource.cloneWithRows(result.items),isLoading:false}))
      .catch(err =>cosole.log(err))

  }
  renderRow(data){
    return (
      <RepositoryCell data={data}/>
    )
  }
  render(){
    return (
      <View style={{flex:1}}>
        <ListView
          refreshControl={<RefreshControl
            refreshing={this.state.isLoading}
            colors={["#2196f3",'#ff0']}
            title={'Loading...'}
            tintColor={'#2196f3'}
            titleColor={"#f00"}
          />}
          dataSource={this.state.dataSource} renderRow={(data) => this.renderRow(data)}/>
      </View>
    )
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#f5f5ff'
  },
  text: {
    fontSize: 18
  },
  row: {
    height: 50
  },
  line: {
    height: 1,
    backgroundColor: "#000"
  }
});